·
<script setup>
import { ref, reactive, watch } from "vue"
const props = defineProps(['visiable', 'choose'])
const emit = defineEmits(['close', 'sendOut'])
const acWrap = ref()
const isShow = ref(false)
const fileList = ref([
  {
    name: 'element-plus-logo.svg',
    url: 'https://element-plus.org/images/element-plus-logo.svg',
  },
  {
    name: 'element-plus-logo2.svg',
    url: 'https://element-plus.org/images/element-plus-logo.svg',
  },
])

const handleRemove = (file, uploadFiles) => {
  console.log(file, uploadFiles)
}

const handlePreview = (uploadFile) => {
  console.log(uploadFile)
}

const handleExceed = (files, uploadFiles) => {
  ElMessage.warning(
    `The limit is 3, you selected ${files.length} files this time, add up to ${files.length + uploadFiles.length
    } totally`
  )
}

const beforeRemove = (uploadFile, uploadFiles) => {
  return ElMessageBox.confirm(
    `Cancel the transfer of ${uploadFile.name} ?`
  ).then(
    () => true,
    () => false
  )
}
const close = () => {
  emit('close')
}
watch(() => props.visiable, (val) => {
  isShow.value = val
})
</script>

<template>
  <el-dialog v-model="isShow" title="支付" width="600" @close="close">
    <div class="ac-wrap" ref="acWrap">
      <span>上传凭证</span>
      <el-upload v-model:file-list="fileList" class="upload-demo"
        action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15" multiple :on-preview="handlePreview"
        :on-remove="handleRemove" :before-remove="beforeRemove" :limit="3" :on-exceed="handleExceed">
        <el-button type="primary">Click to upload</el-button>
        <template #tip>
          <div class="el-upload__tip">
            jpg/png files with a size less than 500KB.
          </div>
        </template>
      </el-upload>
    </div>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="isShow = false">取消</el-button>
        <el-button type="primary" @click="isShow = false">
          确定支付
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<style scoped>
.ac-wrap {
  width: calc(100% - 40px);
  height: calc(100% - 40px);
  position: relative;
  background-color: #fff;
  overflow: auto;
  padding: 0 20px;
}
</style>